<script setup>
import Server from './Server.vue';
import { computed, ref } from 'vue' 
import { useGlobalStore } from '@/stores/global.js'
const globalStore = useGlobalStore();

const props = defineProps(['choosed', 'item'])

const count = 3

// 响应。
let choosedCabinetIndex = ref(-1)

// 静态样式
let choosedClass = computed(() => {
  return (props.choosed?"cabinet choosed":"cabinet")
})

let choosedServerClass = (index)=>{
  // console.log("rye")
  if(props.choosed && choosedCabinetIndex.value == index) {
    return "choosed-server server"
  }
  return "server"
}


// console.log(props.choosed)
const clickServerHandler = (index)=>{  
  globalStore.choosedServerIndex = index
  choosedCabinetIndex.value = index
}

</script>

<template>
  <main>
    <div :class="choosedClass">
      <n-tag type="info">
        {{ item.name }}
      </n-tag>
      <Server @click="clickServerHandler(index)"
        :class="choosedServerClass(index)"
        v-for="(item,index) in item.count"/>
        
    </div>
  </main>
</template>

<style>
.cabinet {
  border: 2px solid gray;
  width: 200px;
  margin-right: 2em;
  padding: 1em;
}
.choosed {
  box-shadow: 0px 0px 5px #ffc101;
  border-color: #ffc101;
}
.choosed-server{
  box-shadow: 0px 0px 5px red;
}
</style>
